<template>
  <div class="search-container">
    <div class="site-box" @click="siteClickHandler">
      <div class="keyword">{{conf.siteText}}</div>
      <div class="bg_img arrow-icon">
        <i class="iconfont icon-sousuolan_chengshi"></i>
      </div>
      <div class="border-right"></div>
    </div>
    <div class="search-input-box" @click="focusHandler">
      <!-- <img src="../../assets/img/market/classify/search.png" class="search-icon"> -->

      <i class="iconfont icon-sousuolan_sousuo"></i>
      <input
        type="search"
        :placeholder="conf.placeholder"
        :disabled="disabled"
        @input="inputContent"
        v-model="currentValue"
        @blur="blur"
      >
    </div>
  </div>
</template>
<script>
export default {
  props: {
    conf: {
      type: Object,
      default: function() {
        return { siteText: '全国', placeholder: '请输入楼盘名称' }
      }
    },
    value: String,
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data: () => ({
    arrowIcon: require('IMG/market/list__arrow_@2x.png'),
    currentValue: ''
  }),
  methods: {
    blur() {
      setTimeout(() => {
        document.activeElement.scrollIntoViewIfNeeded(true)
      }, 10)
    },
    siteClickHandler() {
      if (this.$route.name === 'area-select') {
        // 在地区选择页面,直接返回上个
        this.$router.go(-1)
      } else {
        this.$emit('areaClick')
      }
    },
    focusHandler() {
      if (this.$route.name === 'area-select') {
        // 在地区选择页面,直接返回上个
        this.$router.go(-1)
      } else {
        this.$emit('focus')
      }
    },
    inputContent() {
      this.$emit('getContent', this.currentValue)
    }
  },
  mounted() {
    setTimeout(() => {
      this.currentValue = this.value
    }, 1)
  },
  watch: {
    value(val) {
      this.currentValue = val
    },
    currentValue(val) {
      this.$emit('input', val)
    }
  }
}
</script>
<style lang="less" scoped>
.search-container {
  width: 100%;
  height: 36px;
  border-radius: 4px;
  background-color: #f2f6f7;
  display: flex;
  align-items: center;
  > .site-box {
    position: relative;
    font-size: 14px;
    color: #0d1b33;
    height: 100%;
    padding: 0 0 0 10px;
    width: 90px;
    display: flex;
    align-items: center;
    box-sizing: content-box;
    > .keyword {
      height: 36px;
      line-height: 36px;
      width: 50px;
      text-align: center;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    > .arrow-icon {
      position: absolute;
      display: inline-block;
      width: 16px;
      height: 16px;
      top: 9px;
      left: 55px;
      i {
        color: #9ca5b5;
      }
    }
    > .border-right {
      position: absolute;
      display: inline-block;
      z-index: 10;
      border-right: 1px solid rgba(156, 165, 181, 0.3);
      height: 50%;
      top: 25%;
      right: 0px;
    }
  }
  > .search-input-box {
    height: 100%;
    width: 100%;
    display: flex;
    font-size: 14px;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    > i {
      color: #9ca5b5;
      font-size: 15px;
    }
    // .search-icon {
    //   width: 24px;
    //   height: 24px;
    // }
    input {
      width: 100%;
      background-color: #f5f5f5;
      border: none;
      border-radius: 4px;
      height: 24px;
      line-height: 24px;
      &::placeholder {
        color: #9ca5b5;
      }
    }
  }
}
</style>
